<template>
	<div id="p" ref="clock" class="welcome-page" style="position: relative;height: 100%;">
		<div class="welcome-content">
			<div class="welcome-item">
				<div class="welcome-weather">
					<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=1" width="100%" height="30px" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
				</div>
				<div class="cv-header">llz通讯窗口(当前在线人数：{{onlineNum}}人)</div>
				<div id="message" class="message-content el-main">
					<div :class="msg.userCode == user.userCode?'row-right':'row-left'" v-for="(msg , index) in messages">
						<span v-show="msg.userCode != user.userCode">{{msg.userName}}：</span>
						<span>{{msg.msg}}</span>
						<span v-show="msg.userCode == user.userCode">：{{msg.userName}}</span>
					</div>
				</div>
				<div class="send-msg">
					<el-input type="textarea" :rows="2" placeholder="请输入发送内容" v-model="msg"></el-input>
					<div class="btn">
						<el-button class="el-main-color" size="mini" icon="el-icon-sort" @click="sendMsg(msg)">发送</el-button>
					</div>
				</div>
			</div>
			<div class="welcome-item">
				<!--<div class="welcome-time">
					<p>{{time}}</p>
				</div>-->
			</div>
		</div>
		<div id="ms" class="rotate" style="height: 300px;width: 300px;border-right: solid 1px #333333;position: absolute;display: none;background-color: transparent;">
			<i class="el-icon-caret-top" style="position: absolute;right: -11px;top:-10px;font-size: 20px;"></i>
		</div>
		<div id="min" class="rotate" style="height: 200px;width: 200px;border-right: solid 1px #333333;position: absolute;display: none;background-color: transparent;">
			<i class="el-icon-caret-top" style="position: absolute;right: -11px;top:-10px;font-size: 20px;"></i>
		</div>
		<div id="hour" class="rotate" style="height: 100px;width: 100px;border-right: solid 1px #333333;position: absolute;display: none;background-color: transparent;">
			<i class="el-icon-caret-top" style="position: absolute;right: -11px;top:-10px;font-size: 20px;"></i>
		</div>
		<div id="cicle" class="rotate" style="height:10px;width: 10px;background-color:black;position: absolute;border-radius: 5px;display: none;"></div>
	</div>

</template>
<style>
	@import url("welcome.css");
</style>
<script>
	import $ from 'jquery'
	export default {
		data() {
			return {
				time: '',
				currents: 0,
				ws: null,
				user: null,
				messages: [],
				msg: '',
				onlineNum:'0'
			}
		},
		created() {
			this.getNowFormatDate();
			this.user = this.utils.getJsonObject('user');
		},
		mounted() {
			//this.initClock();
			var _self = this;
			_self.startSocket();
//			setInterval(function() {
//				_self.ws.send(JSON.stringify({
//					user: _self.user,
//					message: 'hello,早上好啊'
//				}))
//			}, 20000);
		},
		methods: {
			startSocket(){
				var _self = this;
				_self.utils.ajaxJSON({
					url:'system/initScoket',
					type:'post',
					data:{},
					success:function(res){
						if(res.status == 200){
							_self.initSocket();
						}
					}
				})
			},
			initSocket() {
				var _self = this;
				var wsServer = null;
				wsServer = "ws://"+_self.utils.socketUrl+"socket/llz/" + this.user.userCode;
				this.ws = new WebSocket(wsServer); //创建WebSocket对象
				this.ws.onopen = function(evt) {
					_self.alertMmsg('success', '初始化连接成功!');
				};
				this.ws.onmessage = function(evt) {
					var msg = evt.data.toJSON();
					_self.messages.push(msg);
					_self.onlineNum = msg.onlineNum;
					_self.$nextTick(() => {
						var messageDiv = document.getElementById('message');
						console.log(messageDiv)
						if(messageDiv.scrollHeight){
							messageDiv.scrollTop = messageDiv.scrollHeight;
						}
					});
				};
				this.ws.onerror = function(evt) {
					_self.alertMmsg('error', '初始化连接异常!');
				};
				this.ws.onclose = function(evt) {
					_self.alertMmsg('warning', '连接已关闭!');
				};
			},
			alertMmsg(type, msg) {
				this.$message({
					type: type,
					message: msg
				});
			},
			sendMsg(msg){
				var _self = this;
				_self.ws.send(JSON.stringify({
					user: _self.user,
					message: msg
				}));
				_self.msg = '';
			},
			getNowFormatDate() {
				var _self = this;
				var date = new Date();
				_self.time = date.Format('yyyy-MM-dd hh:mm:ss');
			},
			initClock() {
				var date = new Date();
				var s = date.getSeconds();
				var m = date.getMinutes();
				var h = date.getHours();
				this.currents = s + m * 60 + h * 3600;
				this.ensureLocation();
				setInterval(this.run, 1000);
			},
			run() {
				this.currents++;

				this.getNowFormatDate();
				var temps = this.currents * 360 / 60
				var tempm = this.currents * 360 / 3600
				var temph = this.currents / (3600 * 12) * 360

				$("#ms").css('transform', 'rotate(' + temps + 'deg)')
				$("#ms").css('-webkit-transform', 'rotate(' + temps + 'deg)')
				$("#ms").css('-moz-transfor', 'rotate(' + temps + 'deg)')
				$("#ms").css('-ms-transform', 'rotate(' + temps + 'deg)')
				$("#ms").css('-o-transform', 'rotate(' + temps + 'deg)')

				$("#min").css('transform', 'rotate(' + tempm + 'deg)')
				$("#min").css('-webkit-transform', 'rotate(' + tempm + 'deg)')
				$("#min").css('-moz-transfor', 'rotate(' + tempm + 'deg)')
				$("#min").css('-ms-transform', 'rotate(' + tempm + 'deg)')
				$("#min").css('-o-transform', 'rotate(' + tempm + 'deg)')

				$("#hour").css('transform', 'rotate(' + temph + 'deg)')
				$("#hour").css('-webkit-transform', 'rotate(' + temph + 'deg)')
				$("#hour").css('-moz-transfor', 'rotate(' + temph + 'deg)')
				$("#hour").css('-ms-transform', 'rotate(' + temph + 'deg)')
				$("#hour").css('-o-transform', 'rotate(' + temph + 'deg)')

				$(".rotate").css('display', 'block')
			},
			ensureLocation() {

				console.log($('#p').height())
				var height = $('#p').height();
				var width = $('#p').width();
				$("#ms").css('top', (height / 2 - 300) + 'px');
				$("#ms").css('left', (width / 2 - 300) + 'px');

				$("#min").css('top', (height / 2 - 200) + 'px');
				$("#min").css('left', (width / 2 - 200) + 'px');

				$("#hour").css('top', (height / 2 - 100) + 'px');
				$("#hour").css('left', (width / 2 - 100) + 'px');

				$("#cicle").css('top', (height / 2 - 5) + 'px');
				$("#cicle").css('left', (width / 2 - 5) + 'px');
			}
		}
	}
</script>